<template>
    <!-- 下拉框多选的组件封装 -->
    <div style="width:100%;">
        <!-- 开启懒加载 -->
        <el-select
            v-if="isLazy"
            ref="myMultiole"
            :class="!!Multi_disabled?'disabled_select':''"
            multiple
            collapse-tags
            filterable
            @visible-change="selectBlur"
            @change="selectChang"
            @focus="selectFocus"
            :filter-method="filterMethoda"
            v-model="value"
            :placeholder="$t('common.select_plactholder')"
            >
            <el-option
                v-for="item in select_options"
                :key="item[select_key]"
                :label="item[select_label]"
                :value="item[select_value]"
                :disabled="!!Multi_disabled&&item.selected"
                class="my-multiple"
            >
                <div @click="option_click(item)" style="padding:0 40px 0 20px">
                    <span>{{ item[select_label] }}</span>
                    <span v-if="isDoubleJudge" @click.stop="clickTrue(item)" style="margin-left:5px;">
                        <img v-if="item.isTrue" style="width:12px" src="@/assets/img/multi_select_true.png" alt="">
                        <img v-else style="width:12px" src="@/assets/img/multi_select_false.png" alt="">
                    </span>
                </div>
            </el-option>
        </el-select>
        <!-- 不开启懒加载 -->
        <el-select
            v-else
            ref="myMultiole"
            :class="!!Multi_disabled?'disabled_select':''"
            multiple
            collapse-tags
            filterable
            @visible-change="selectBlur"
            @change="selectChang"
            v-model="value"
            :placeholder="$t('common.select_plactholder')"
            >
            <el-option
                v-for="item in select_options"
                :key="item[select_key]"
                :label="item[select_label]"
                :value="item[select_value]"
                :disabled="!!Multi_disabled"
                class="my-multiple"
            >
                <div @click="option_click(item)" style="padding:0 40px 0 20px">
                    <span v-if="select_labels.length>0">
                        <span v-for="(temp,k) in select_labels" :key="k">
                            <span v-if="k==select_labels.length-1">{{ item[temp] }}</span>
                            <span v-else>{{ item[temp] }}-</span>
                        </span>
                    </span>
                    <span v-else>{{ item[select_label] }}</span>
                    <span v-if="isDoubleJudge" @click.stop="clickTrue(item)" style="margin-left:5px;">
                        <img v-if="item.isTrue" style="width:12px" src="@/assets/img/multi_select_true.png" alt="">
                        <img v-else style="width:12px" src="@/assets/img/multi_select_false.png" alt="">
                    </span>
                </div>
            </el-option>
        </el-select>
    </div>
</template>

<script>
import { debounce } from '@/utils/func.js'
export default {
  components: {
  },
    name: "MyTable",
    props:{
        select_model:[Array, String],
        isDoubleJudge:{//是否二次判断
            type: Boolean,
            default:false
        },
        Multi_disabled:{//是否禁用
            type: Boolean,
            default:false
        },
        modalName:[String],//字段名称
        select_options:[Array],//下拉单数据
        select_key:{//下拉单key
            type:String,
            default:'id'
        },
        select_label:{//下拉单label
            type:String,
            default:'name'
        },
        select_labels:{//下拉单label组
            type:Array,
            default:()=>[],
        },
        select_value:{//下拉单value
            type:String,
            default:'id'
        },
        isLazy:{//是否开启懒加载
            type: Boolean,
            default:false
        },
    },
    data() {
        return{
            options:[],
            value:'',
            hide_arr:[],
        }
    },
    watch: {
        select_model:{
            handler (newValue, oldValue,e) {
                // 当prop变化时，这里会执行你想要的操作
                this.value=this.select_model
                if(!!Array.isArray(this.select_model)&&!!this.select_model&&!!this.select_model.length>0&&!!this.select_options&&!!this.select_options.length>0){
                    this.options=JSON.parse(JSON.stringify(this.select_options))
                    this.select_options.forEach(el=>{
                        if(this.value.filter(item=>{return item==el[this.select_key]}).length>0){
                            el.selected=true
                            // el.isTrue=true
                        }else{
                            el.selected=false
                            // el.isTrue=false
                        }
                    })
                }else{
                    if(this.select_options.length>0){
                        this.select_options.forEach(el=>{
                            el.selected=false
                            // el.isTrue=false
                        })
                    }
                }
            },
            deep: true // 开启深度监听
        },
    },
    mounted(){
        console.log(this.select_options)
    },
    methods: {
        clickTrue(data){
            if(data.selected){
                this.select_options.forEach(item=>{
                    if(item[this.select_key]==data[this.select_key]){
                        item.isTrue=!item.isTrue
                    }
                })
                this.setHideStr()
            }
        },
        selectBlur(type){
            if(!type){
                this.$emit('selectBlur')
            }
        },
        selectChang(){
            if(this.value.length>0){
                this.select_options.forEach((item,k)=>{
                    let arr=this.value.filter(el=>{return el==item[this.select_key]})
                    if(arr.length==0){
                        item.isTrue=false
                    }
                    // this.hide_arr.forEach(ele=>{
                    //     if(item.id==ele){
                    //     }
                    // })
                })
            }
            // let select_options_copy=JSON.parse(JSON.stringify(this.select_options))
            // this.select_options.forEach(item=>{
            //     item.selected=false
            //     item.isTrue=false
            // })
            // if(this.value.length>0){
            //     this.select_options.forEach((item,k)=>{
            //         this.value.forEach(el=>{
            //             if(item.id==el){
            //                 item.selected=true
            //                 item.isTrue=select_options_copy[k].isTrue
            //             }
            //         })
            //         // this.hide_arr.forEach(ele=>{
            //         //     if(item.id==ele){
            //         //     }
            //         // })
            //     })
            // }
            this.setHideStr()
            // this.$emit('selectChang',{name:this.modalName,value:this.value})
        },
        option_click(obj){
            setTimeout(() => {
                if(this.value.length>0){
                    console.log(this.value)
                    for(var i=0;i<this.value.length;i++){
                        if(this.value[i]==obj[this.select_value]){
                            obj.isTrue=true
                            break
                        }else{
                            obj.isTrue=false
                        }
                    }
                }
                this.setHideStr()
            }, 10);
        },
        setHideStr(){
            this.hide_arr=[]
            this.select_options.forEach(item=>{
                if(!item.isTrue){
                    this.hide_arr.push(item[this.select_value])
                }
            })
            this.$emit('selectChang',{name:this.modalName,value:this.value,hideStr:this.hide_arr.join(',')})
        },
        selectFocus(){
            const SELECTWRAP = this.$refs.myMultiole.$el.querySelector('.el-scrollbar__wrap')
            if(!!SELECTWRAP){
                let that=this
                SELECTWRAP.addEventListener('scroll',function(e){
                    if(e.target.scrollHeight-e.target.scrollTop<=e.target.clientHeight){
                        if(that.isLazy){
                            that.$emit('loadData')
                        }
                    }
                })
            }
        },
        filterMethoda:debounce(function(value) {
            this.$emit('filterDataFun',value)
        },500),
    }
};
</script>

<style scoped lang="less">
/deep/.el-select-dropdown__item{
    padding: 0;
}
.el-select-dropdown__item.is-disabled{
    cursor: pointer;
}
/deep/ .el-select__input{
    margin-left: 5px;
}
</style>